import React, { Component } from "react";
import { Keyboard, StyleSheet, TextInput } from "react-native";
import { Button, Dialog, Text, TouchableOpacity, View } from "react-native-ui-lib";
import { commonStyles } from "../../../configs/commonStyle";
import { Icon } from "../../components";

/**
 * 修改联系电话
 */
export default class EditMobileDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
            ordNo: '',
            mobile: '',
        };
    }

    show = (ordNo) => {
        this.setState({isOpen: true,ordNo,mobile:'',errorTips:''})
    }

    dismiss = () => {
        this.setState({isOpen: false})
    }

    renderPannableHeader = props => {
        return (
            <View>
                <View margin-15 row centerV spread>
                    <View >
                        <Icon type="AntDesign" name={'close'} size={16} color={'transparent'}/>
                    </View>
                    <View flex center>
                        <Text style={{...commonStyles.text_black_17}}>修改联系电话</Text>
                    </View>
                    <TouchableOpacity onPress={this.dismiss}>
                        <Icon type="AntDesign" name={'close'} size={16} color={'#282828'}/>
                    </TouchableOpacity>
                </View>
                <View height={1} bg-line/>
            </View>
        );
    };

    render() {
        const {isOpen, ordNo,mobile,errorTips} = this.state;
        return (
            <Dialog
                migrate
                width={'80%'}
                containerStyle={styles.roundedDialog}
                visible={isOpen}
                onDismiss={this.dismiss}
                renderPannableHeader={this.renderPannableHeader}
            >
                <View>
                    <View padding-15>
                        <View style={styles.textInput}>
                            <TextInput placeholderTextColor="#959595"
                                       style={{ ...styles.inputStyle }}
                                       placeholder="请输入中间4位或者11位完整号码"
                                       autoCapitalize="none"
                                       value={mobile}
                                       maxLength={11}
                                       keyboardType={'number-pad'}
                                       defaultValue={this.state.mobile}
                                       onChangeText={value => this.setState({ mobile: value })} />
                        </View>
                        {
                            IsNullOrEmpty(errorTips)?null:
                              <Text style={commonStyles.text_red_12}>{errorTips}</Text>
                        }
                    </View>
                    <View row style={{borderTopColor: '#eeeeee', borderTopWidth: 1}}>
                        <Button flex background-white black text14 label={'取消'} onPress={() => this.dismiss()}/>
                        <View style={{backgroundColor: '#eeeeee', width: 1}}/>
                        <Button flex label={'确定'} background-white primary text14
                                onPress={() => {
                                    Keyboard.dismiss();
                                    if(IsNullOrEmpty(mobile))
                                    {
                                        this.setState({errorTips:'请输入手机号码'})
                                        return;
                                    }
                                    this.dismiss();
                                    this.props.callBack && this.props.callBack(ordNo,mobile);
                                }}
                        />
                    </View>
                </View>
            </Dialog>
        );
    }
}

const styles = StyleSheet.create({
    roundedDialog: {
        backgroundColor: 'white',
        borderRadius: 4
    },
    inputView: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
        borderWidth: 1,
        borderRadius: 4,
        borderColor: '#D8D8D8',
        height: 45,
    },
    textInput: {
        height: 50,
        borderWidth: 1,
        marginBottom: 10,
        padding: 10,
        borderRadius: 4,
        borderColor: '#eeeeee',
        backgroundColor: '#F0F0F0',
    },
    inputStyle: {
        color: "#333333",
        fontSize: 14,
        flex: 1,
        padding: 0,
        height: 35,
    },
});


